<template>
  <dialog ref="dialogRef" class="cost-mode-viewer">
    <form method="dialog" class="dialog-body" @submit.prevent="close">
      <div class="dialog-header">
        <h3>
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="1" x2="12" y2="23"/>
            <path d="m17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
          </svg>
          费用模式
        </h3>
        <button type="button" class="ui-close-btn" @click="close" aria-label="关闭">
          <svg class="icon-x" viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
        </button>
      </div>
      <div class="section">
        <div class="section-title">基本信息</div>
        <div class="mode-row fancy">
          <div class="badge" :class="entry?.costMode">{{ entry?.costMode==='fixed' ? '固定费用' : '计数费用' }}</div>
          <div class="divider"></div>
          <div class="kv"><span class="k">使用公式</span><span class="v" :class="entry?.useFormula ? 'yes' : 'no'">{{ entry?.useFormula ? '是' : '否' }}</span></div>
        </div>
      </div>
      <div class="section" v-if="entry?.useFormula">
        <div class="section-title">公式</div>
        <div class="formula-box improved">
          <p class="formula-ref" v-if="entry.formulaExpression"><code>{{ entry.formulaExpression }}</code></p>
          <p v-else class="empty">暂无公式</p>
        </div>
        <p class="formula-hint">该公式为只读展示，如需调整请在编辑条目中维护。</p>
      </div>
      <div class="section" v-else>
        <div class="section-title">数值</div>
        <div class="value-grid">
          <template v-if="entry?.costMode==='fixed'">
            <div class="value-item"><span class="label">固定金额</span><span class="data">{{ entry?.fixedAmount ?? '-' }}</span></div>
          </template>
          <template v-else>
            <div class="value-item"><span class="label">单价</span><span class="data">{{ entry?.unitPrice ?? '-' }}</span></div>
          </template>
        </div>
      </div>
      <div class="dialog-actions footer">
        <button type="button" class="btn primary" @click="close">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <polyline points="20,6 9,17 4,12"/>
          </svg>
          关闭
        </button>
      </div>
    </form>
  </dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface EntryLite {
  id: string;
  costMode: 'fixed' | 'count';
  useFormula: boolean;
  formulaExpression?: string;
  fixedAmount?: number;
  unitPrice?: number;
  quantity?: number;
}

const dialogRef = ref<HTMLDialogElement | null>(null);
const entry = ref<EntryLite | null>(null);

function open(e: EntryLite) {
  entry.value = e;
  const el = dialogRef.value;
  if (el) {
    el.classList.remove('closing');
    el.showModal();
  }
}
function close() {
  const el = dialogRef.value;
  if (!el) return;
  if (el.classList.contains('closing')) return; // 避免重复触发
  el.classList.add('closing');
  const done = () => {
    el.removeEventListener('transitionend', done);
    el.classList.remove('closing');
    el.close();
  };
  el.addEventListener('transitionend', done);
  setTimeout(done, 450);
}

// 暴露方法给父组件
defineExpose({ open, close });
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; }

.cost-mode-viewer::backdrop { 
  background: rgba(15,23,42,.52); 
  backdrop-filter: blur(6px); 
  animation: backdropFadeIn .32s ease; 
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cost-mode-viewer.closing::backdrop { 
  animation: backdropFadeOutCM .32s ease forwards; 
}
@keyframes backdropFadeOutCM { 
  to { background: rgba(15,23,42,0); backdrop-filter: blur(0); } 
}

@keyframes dialogFadeSlide { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform: translateY(0);} }

.dialog-body { 
  display: flex; 
  flex-direction: column; 
  gap: 1.25rem; 
  padding: 1.35rem 1.5rem 1.5rem; 
  background: linear-gradient(145deg,#ffffff,#f8fafc 70%); 
  position: relative; 
}

.cost-mode-viewer[open] .dialog-body { animation: contentSlideIn .35s ease .05s both; }

@keyframes contentSlideIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }

.value-item { background:#fff; border:1px solid #e3e8ef; padding:.75rem 1rem; border-radius:10px; display:flex; flex-direction:column; gap:.4rem; position:relative; transition:background .25s ease,border-color .25s ease; }
.value-item:hover { background:#f8fafc; border-color:#c2d4e6; }
.value-item:after { display:none; }

.close-x { 
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 10px;
  color: #6b7280;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  width: 20px;
  height: 20px;
}

.close-x:hover { 
  background: linear-gradient(135deg, #fee2e2, #fecaca); 
  color: #dc2626;
  transform: rotate(90deg);
}

.close-x:active {
  transform: rotate(90deg) scale(0.9);
}

.section { 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
}

.section-title { 
  font-size: 13px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  color: #4b5563; 
  position: relative; 
  padding-left: 12px; 
}

.section-title:before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 4px; 
  height: 75%; 
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); 
  border-radius: 2px; 
}

.mode-row.fancy { 
  display: flex; align-items: center; gap: 1rem; font-size: 14px; flex-wrap: wrap; 
  padding: .75rem 1rem; background: #f8fafc; border-radius: 10px; border: 1px solid #dde4ec; }

.badge { 
  padding: 0.5rem 1rem; 
  border-radius: 25px; 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 0.025em; 
  background: #e5e7eb; 
  color: #374151; 
  box-shadow: 0 2px 4px rgba(0,0,0,.1); 
  text-transform: uppercase;
}

.badge.fixed { 
  background: linear-gradient(135deg, #dbeafe, #bfdbfe); 
  color: #1e40af; 
}

.badge.count { 
  background: linear-gradient(135deg, #fef3c7, #fde68a); 
  color: #92400e; 
}

.divider { 
  width: 2px; 
  align-self: stretch; 
  background: linear-gradient(to bottom, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent); 
  border-radius: 1px;
}

.kv { 
  display: flex; 
  gap: 0.75rem; 
  align-items: center; 
}

.kv .k { 
  font-size: 13px; 
  font-weight: 600; 
  color: #6b7280; 
}

.kv .v { 
  font-size: 14px; 
  font-weight: 700; 
  padding: 0.25rem 0.6rem;
  border-radius: 15px;
}

.kv .v.yes { 
  color: #16a34a; 
  background: #dcfce7;
}

.kv .v.no { 
  color: #dc2626; 
  background: #fee2e2;
}

.formula-box.improved { background: #f1f5f9; color: #0f172a; border: 1px solid #d7e2ed; padding: .85rem 1rem; border-radius: 10px; font-size: 13px; font-family: 'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,monospace; position: relative; min-height: 44px; display: flex; align-items: flex-start; box-shadow: none; }

.formula-ref { 
  margin: 0; 
  line-height: 1.6; 
  white-space: pre-wrap; 
  word-break: break-word; 
  width: 100%; 
}

.formula-ref code { background: transparent; padding: 0; color: #1e3a8a; font-weight: 600; display: block; text-shadow: none; }

.formula-hint { 
  margin: 0.75rem 0 0; 
  font-size: 12px; 
  color: #6b7280; 
  font-style: italic;
}

.value-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
  gap: 1rem; 
}

.value-item { 
  background: linear-gradient(135deg, #ffffff, #f8fafc); 
  border: 2px solid #e5e7eb; 
  padding: 1rem 1.25rem; 
  border-radius: 12px; 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  position: relative; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -6px rgba(59,130,246,.2);
  border-color: #3b82f6;
}

.value-item:after { 
  content: ""; 
  position: absolute; 
  right: 12px; 
  top: 12px; 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); 
  opacity: 0.6; 
}

.value-item .label { 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: 0.05em; 
  color: #6b7280; 
  text-transform: uppercase; 
}

.value-item .data { 
  font-size: 18px; 
  font-weight: 700; 
  color: #1f2937; 
}

.dialog-actions.footer { 
  margin-top: 1rem; 
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.btn { 
  cursor: pointer; 
  border: 1px solid transparent; 
  padding: 0.75rem 1.5rem; 
  border-radius: 12px; 
  font-size: 14px; 
  font-weight: 600; 
  letter-spacing: 0.025em; 
  box-shadow: 0 2px 4px rgba(0,0,0,.1); 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:none; }
.btn.primary:hover { background:#1d4ed8; }

/* ===== Overrides: 调整标题图标尺寸 & 关闭按钮位置 ===== */
.dialog-header { 
  position: relative; 
  display: flex; 
  align-items: center; 
  gap: .55rem; 
  min-height: 46px; 
  padding: .25rem 0; 
}

.dialog-header h3 { 
  margin: 0; 
  font-size: 16px; 
  font-weight: 600; 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
  padding-right: 2.5rem; /* 给右上角关闭按钮留空间 */
}

/* 标题前图标缩小并统一颜色 */
.title-icon { 
  width: 18px; 
  height: 18px; 
  stroke: #2563eb; 
  stroke-width: 1.8; 
  flex: 0 0 auto; 
}

/* 右上角关闭按钮绝对定位（统一按钮类） */
.dialog-header > .ui-close-btn { position:absolute; top:4px; right:4px; }

.btn:active { 
  transform: translateY(0); 
}

.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:none; }
.btn.primary:hover { background:#1d4ed8; }
</style>
